<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>课程管理系统</title>
		<link rel="stylesheet" type="text/css" href="../css/style.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap-treeview.js" type="text/javascript" charset="UTF-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.menu {
				border: 1px solid #337ab7;
			}
			
			.sub-menu {
				border: none;
			}
			
			.menu li {
				cursor: pointer;
			}
			
			.menu>li {
				background: #337ab7;
				color: #FFFFFF;
			}
			
			ol,
			ul {
				list-style: none;
			}
			.floatClass{
				float: left;
				width: 120px;
			}
		</style>
	</head>

	<body>
		<script type="text/javascript">
			jQuery(document).ready(function() {
				function tree(data) {
					var s="<ul>";
					$.each(data, function(i,d) {
						s=s+"<li specialid='"+d.id+"'>"+d.text+"</li>";
						var hz=d.children;
						if(hz.length!=0){
							s=s+tree(hz);
						}
						//s=s+"</li>";
					});
					s=s+"</ul>";
					return s;
				}
					$.get("getcourse","",function (data) {
					$.each(data, function(index,element) {
						var flag=1;
						$("#course-ul-list").append("<li kcid='" + element.id + "' kcdp='"+element.descript+ "'>" + element.name + "</li>")
						$("#course-ul-list").children("li").addClass("list-group-item");
						$("#course-ul-list").children("[kcid='" + element.id + "']").click(function () {
							$.ajax({
								type:"get",
								url:"getCTree/"+element.id,
								success:function (data) {
									var cd=$("[kcid='" + element.id + "']").children("ul");
									if(cd.length==0)
									{
										$("[kcid='" + element.id + "']").append(tree(data));
										$("#course-ul-list [specialid]").click(function (o) {										
										var transportid=$(this).attr("specialid");
										$.ajax({
											type:"get",
											url:"findcatalog/"+transportid,
											success:function (data) {
												$("#fv2").html("");
												$.each(data, function(index,element) {
													var html2="<div id=video"+element.id+"><P><a href='VideoControll/"+element.id+"'><img src='"+element.img+"' width='80'/></a></P><a href='VideoControll/"+element.id+"'>"+element.name+"</a></div>";
													$("#fv2").append(html2);
													$("#coursedescripiton").val(element.description);
													$("#video"+element.id).addClass("floatClass");
												});
											}
										});
										});
									}
								}
							});							
						});	
						
				})
				});
			});
		</script>
		<div class="container">
			<nav class="navbar navbar-inverse">
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand">课程管理系统</a>
				</div>
				<p class="navbar-text navbar-right" style="margin-right: 20px;">用户</p>
			</nav>
			<div class="row">
				<div class="col-sm-2">
					<ul class="list-group menu">
						<li class="list-group-item">我的课程管理</li>
							<ul id="course-ul-list" class="list-group">
							</ul>
					</ul>
				</div>
				<div class="col-sm-10">
					<ol class="breadcrumb" id="path">
						<li><a href="#">我的课程</a></li>
						<li><a href="#">课程文件</a></li>
					</ol>
					<div id="file">
							<form id="fv" class="form-horizontal">
								<ul id="fv2">
									
								</ul>
							</form>
					</div>
				</div>
			</div>
			
		</div>
	</body>

</html>